<template>
  <nav class="menu">
    <!-- 为 了 防 止 发 生 这 种 情 况， 有 一 个 exact prop， 它 是 个 布 尔 值。 
    如 果 设 置 其 为 true ，则 仅 在 当 前 路 径 完 全 匹 配 时， 链 接 才 能 获 得 active class。-->
    <router-link :to="{name: 'home'}" exact>Home</router-link>
    <router-link :to="{name: 'faq'}">FAQ</router-link>
    <router-link :to="{name: 'tickets'}">Support tickets</router-link>
    <div class="spacer"></div>

    <template v-if="$state.user">
      <a>{{ $state.user.username }}</a>
      <a @click="logout">Logout</a>
    </template>
    <router-link v-else to="{name: 'login'}">Login</router-link>
  </nav>
</template>

<script>
/**
 * 注意
 * 这 是 因 为 在 默 认 情 况 下， active class 匹 配 行 为 是 包 容 的！ 这 意 味 着 如 果 路 径 为/ faq 或 以/ faq/ 开 头，
 * < router-link to ="/ faq" > 都 将 获 得 active class。
 * 但 是 这 也 意 味 着 如 果 当 前 路 径 以/ 开 头， 那 么 < router-link to ="/" > 都 将 得 到 该 class，
 * 这 包 括 了 所 有 可 能 的 路 径！ 这 就 是 为 什 么 我 们 的 首 页 链 接 将 永 远 得 到 这 个 class。
 * 为 了 防 止 发 生 这 种 情 况， 有 一 个 exact prop， 它 是 个 布 尔 值。
 * 如 果 设 置 其 为 true ，则 仅 在 当 前 路 径 完 全 匹 配 时， 链 接 才 能 获 得 active class。
 */

export default {
  methods: {
    async logout() {
      // 调用退出接口
      const result = await this.$fetch("logout");
      if (result.status === "ok") {
        // 如果推出成功，就清空全局状态下的user值
        this.$state.user = null;
        if (this.$route.marched.some(m => m.meta.private)) {
          this.$router.push({ name: "home" });
        }
      }
    }
  }
};
</script>

<style lang="stylus" scope>
@import '../assets/style/imports'

.router-link-active
  border-bottom-color $primary-color
</style>